iT邦幫忙

2024 iThome 鐵人賽

DAY 4
1
Modern Web

重新認識 FrontEnd系列 第 4

Day4:HTML 語意化

  • 分享至 

  • xImage
  •  

本篇文章主要會從結構面來分別介紹常見且對於 SEO 有幫助的標籤,讓我們開始吧

頁面主結構的標籤

  1. <header>:header 標籤主要是用來宣告此區塊為網頁的頭部內容,通常會包含網站標題、導覽列等等的內容,一個網頁只能擁有一個全域性的 header 標籤,當然,你也可以考慮在一些區塊性的標籤上使用 header 作為頭部來使用。
  2. <main>:表示頁面的主要內容區域,根據規範一個頁面只會出現一個 main 標籤。
  3. <aside>:aside 標籤通常會用來放置一些與主內容無關,但與網站本身有幫助的內容。像是推薦文章、廣告、快速導覽之類的地方,可以自行選擇打算放幾個區塊。
  4. <footer>:網站底部,通常會有網站導覽地圖、聯絡方式以及政策相關內容,與 header 和 main 一樣,在主結構下只會出現一次。

頁面區塊的標籤

  1. nav:nav 為導覽列,通常會在 header 裡面提供頁面相關的導覽連結,也有可能會出現在 aside 裡面的友站連結,但其中有一個比較特別的用法是直接提升到與 header、main 和 footer 同一層級,代表的是針對整個網站的導覽而不僅僅只是針對這個頁面的相關範圍。
  2. article:定義獨立的內容區塊,這些內容區塊通常是完整的內容,可以單獨去做閱讀或轉發,像是新聞、文章之類的內容。

頁面子區塊的標籤

  1. section:section 通常會用在多個相依或是類似內容的區塊來搭配使用,每個區塊都透過 section 來包覆
  2. figure:figure 主要是用來介紹內部媒體內容或是希望使用者專注的獨立片段,像是詩歌或是引用文章以及代碼區塊等等,通常會配合將 <figcaption> 標籤放置在區塊第一行或是最後一行當作名稱來使用

元件標籤

講到元件標籤就有太多東西可以講了,像是 h1~h6 的標題標籤、table 表格標籤、form 表單標籤、details 摺疊區塊標籤等等,這邊就不一一介紹啦,有興趣的可以自行前往 w3c 標籤列表 去做查看。


接下來幾天會來聊聊網站結構化資料 (json-ld) 與搜尋結果頁 (Search Engine Results Page) ,今天就到此結束啦。


上一篇
Day3: Meta Tag
下一篇
Day5:搜尋結果頁(SERP)
系列文
重新認識 FrontEnd30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言